<template>
	<div class="app-container">
		<el-form :inline="true" ref="queryRef" label-position="right" :model="params" label-width="200px">
			<div class="form-inline">
				<el-row justify="center">
					<el-col :span="11">
						<el-form-item label="业务对象：" class="form-item" prop="type">
							<el-select v-model="params.type" placeholder="请选择" class="form-select" clearable @change="changeType">
								<el-option v-for="item in typeOptions" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="11">
						<el-form-item label="维护人：" class="form-item" prop="userName">
							<el-input v-model="params.userName" placeholder="" clearable />
						</el-form-item>
					</el-col>
				</el-row>

				<el-row justify="center">
					<el-col :span="11">
						<el-form-item label="年代：" class="form-item" prop="year">
							<el-select v-model="params.year" placeholder="请选择" class="form-select" clearable>
								<el-option v-for="item in optionList1" :key="item.dictItemCode" :label="item.dictItemName"
									:value="item.dictItemCode">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="11">
						<el-form-item label="设防情况：" class="form-item" prop="fortification" v-if="params.type!='5'">
							<el-select v-model="params.fortification" placeholder="请选择" class="form-select" clearable>
                                <el-option v-for="item in optionList2" :label="item.dictItemName"
                                    :value="item.dictItemCode">
                                </el-option>
                            </el-select>
						</el-form-item>
						<el-form-item label="设防情况：" class="form-item" prop="fortification" v-else>
							<el-select v-model="params.fortification" placeholder="请选择" class="form-select" clearable>
								<el-option v-for="item in optionList3" :label="item.dictItemName"
                                    :value="item.dictItemCode" v-if="params.type =='5'">
                                </el-option>
                            </el-select>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row justify="center">
					<el-col :span="11">
						<el-form-item label="维护时间:">
							<el-col :span="11">
								<el-form-item prop="startTime">
									<el-date-picker clearable v-model="params.startTime" type="date" placeholder="开始时间"
										value-format="YYYY-MM-DD" :disabled-date="startDisableDate" style="width: 100%" />
								</el-form-item>
							</el-col>
							<el-col :span="1" class="text-center">
								<span class="text-gray-500">-</span>
							</el-col>
							<el-col :span="11">
								<el-form-item prop="endTime">
									<el-date-picker clearable v-model="params.endTime" type="date" placeholder="结束时间"
										value-format="YYYY-MM-DD" :disabled-date="endDisableDate" style="width: 100%" />
								</el-form-item>
							</el-col>
						</el-form-item>
					</el-col>
					<el-col :span="11">
						<el-form-item label="计算状态：" class="form-item" prop="status">
							<el-select v-model="params.status" placeholder="请选择" class="form-select" clearable>
								<el-option v-for="item in statusOption" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row justify="end">
					<el-form-item class="bottom-button">
						<el-button type="primary" @click="onDelete">删除</el-button>
						<el-button type="primary" @click="onSearch">查询</el-button>
						<el-button type="primary" @click="onRest">重置</el-button>
					</el-form-item>
				</el-row>
			</div>
		</el-form>

		<div class="table-wrapper">
			<el-table class="listTable" ref="multipleTableRef" border :data="tableData" style="width: 100%"
				@selection-change="handleSelectionChange" :cell-style="{ border: '1px solid #e5ebf7' }"
				:header-cell-style="{ border: '1px solid #e5ebf7', borderLeft: 'none' }">

				<el-table-column type="selection" width="55" label="序号" />
				<el-table-column header-align="center" align="center" label="编号" show-overflow-tooltip width="160">
					<template #default="scope">
						<el-button link type="text" size="small" @click.prevent="viewProject(scope.row)">
							{{ scope.row.code }}
						</el-button>
					</template>
				</el-table-column>
				<el-table-column prop="businessObject" header-align="center" align="center" label="业务对象" />
				<el-table-column prop="versionCode" header-align="center" align="center" label="所用数据版本号"
					width="200"></el-table-column>
				<el-table-column prop="year" header-align="center" align="center" label="年代" />
				<el-table-column prop="fortification" header-align="center" align="center" label="设防情况" v-if="params.type!='5'">
					<template #default="scope">
						<span v-if="scope.row.fortification == '0'">未设防</span>
						<span v-if="scope.row.fortification == '1'">自设防</span>
						<span v-if="scope.row.fortification == '6'">6度</span>
						<span v-if="scope.row.fortification == '7'">7度</span>
						<span v-if="scope.row.fortification == '8'">8度</span>
						<span v-if="scope.row.fortification == '9'">9度</span>
					</template>
				</el-table-column>
				<el-table-column prop="fortification" header-align="center" align="center" label="设防情况" v-else>
					<template #default="scope">
						<span v-if="scope.row.fortification == '1'">已设防</span>
						<span v-if="scope.row.fortification == '2'">未设防</span>
						<span v-if="scope.row.fortification == '3'">已有损坏</span>
					</template>
				</el-table-column>
				<el-table-column prop="calculationStatus" header-align="center" align="center" label="计算情况">
					<template #default="scope">
						<span v-if="scope.row.calculationStatus == '1'">已计算</span>
						<span v-if="scope.row.calculationStatus == '2'">未计算</span>
					</template>
				</el-table-column>
				<el-table-column prop="destructiveState6" header-align="center" align="center" label="VI度破坏状态"
                    width="140" />
                <el-table-column prop="destructiveState7" header-align="center" align="center" label="Ⅶ度破坏状态"
                    width="140" />
                <el-table-column prop="destructiveState8" header-align="center" align="center" label="Ⅷ度破坏状态"
                    width="140" />
                <el-table-column prop="destructiveState9" header-align="center" align="center" label="Ⅸ度破坏状态"
                    width="140" />
                <el-table-column prop="destructiveState10" header-align="center" align="center" label="Ⅹ度破坏状态"
                    width="140" />
				<el-table-column prop="userName" header-align="center" align="center" label="维护人" width="120"
					show-overflow-tooltip />
				<el-table-column prop="createTime" header-align="center" align="center" label="维护时间" width="160"
					show-overflow-tooltip />
				<el-table-column label="操作" fixed="right" align="center">
					<template #default="scope">
						<el-button @click="viewProject(scope.row, 'edit')" type="text" size="small">修改</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="paging">
				<el-pagination background v-model:current-page="queryPagination.pageNo" :layout="layout"
					:page-size="queryPagination.pageSize" :total="queryPagination.total"
					@current-change="handleCurrentChange" @size-change="handleSizeChange" />
			</div>
		</div>

		<el-dialog v-model="showDialog" title="地下网管易损性分析与管理" width="400px">
			<p></p>
			<el-radio-group v-model="radio">
				<el-radio :label="1">简单对应的模型</el-radio>
				<el-radio :label="2">连续焊接管道分析方法</el-radio>
				<el-radio :label="3">接口式管道分析方法</el-radio>
			</el-radio-group>
			<template #footer>
				<div class="dialog-footer">
					<el-button type="primary" :disabled="!radio" @click="onClickConfirm">确定</el-button>
					<el-button @click="showDialog = false">取消</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>
 
<script setup>
import { reactive, toRefs } from "vue";
import { ElMessage, ElMessageBox } from 'element-plus'
import { getValEngineering, reCovercalculate, deleteValEngineering } from "@/api/lifelineVulnerAnalysis/lifelineVulnerAnalysis.js";
import { getValidDictItemsByDictCode } from "@/api/map/disasterDataManagement/lifelineSystemInfo.js";
const { proxy } = getCurrentInstance()
const router = useRouter();
const route = useRoute();
const data = reactive({
	// 表单参数
	params: {
		type: "",//业务对象
		startTime: "", //维护开始时间
		endTime: "",//维护结束时间
		userName: "", //维护人
		fortification: "", //设防情况
		year: "",//年代
		status: "",//计算状态
	},
	typeOptions: [
		{
			value: '',
			label: '全部'
		}, {
			value: '1',
			label: '地下管网'
		}, {
			value: '2',
			label: '供水设施'
		}, {
			value: '3',
			label: '供气设施'
		}, {
			value: '4',
			label: '桥梁'
		}, {
			value: '5',
			label: '道路'
		}, {
			value: '6',
			label: '变电站'
		}, {
			value: '7',
			label: '供电设备'
		}, {
			value: '9',
			label: '通信设备'
		}

	],
	fortificationOptions: [
		//候选值为：请选择、未设防、6度、7度、8度、9度、自设防、其他
		{
			value: '0',
			label: '未设防'
		},
		{
			value: '6',
			label: '6度'
		}, {
			value: '7',
			label: '7度'
		}, {
			value: '8',
			label: '8度'
		}, {
			value: '9',
			label: '9度'
		}, {
			value: '1',
			label: '自设防'
		}
	],
	yearOptions: [
		{
			value: '1978年以前',
			label: '1'
		}, {
			value: '1978-1989年',
			label: '2'
		}, {
			value: '1989-2001年',
			label: '3'
		}, {
			value: '2001年以后',
			label: '4'
		}, {
			value: '全部',
			label: ''
		}
	],
	statusOption: [
		{
			value: '',
			label: '全部'
		},
		{
			value: '1',
			label: '已计算'
		},
		{
			value: '2',
			label: '未计算'
		}
	],
	//表格
	tableData: [],
	//分页
	layout: " prev, pager, next, jumper, sizes, total",
	queryPagination: {
		pageNo: 1,
		pageSize: 10,
		total: 100,
	},
});

const {
	params,
	typeOptions,
	fortificationOptions,
	yearOptions,
	statusOption,
	tableData,
	queryPagination,
	layout
} = toRefs(data);


const startDisableDate = (time) => {
	let endDateVal = params.value.endTime
	if (endDateVal) {
		return time.getTime() > new Date(endDateVal).getTime()
	}
}
const endDisableDate = (time) => {
	let beginDateVal = params.value.startTime
	if (beginDateVal) {
		return time.getTime() < new Date(beginDateVal).getTime()
	}
}
//表格
const multipleTableRef = ref();
const multipleSelection = ref()
const handleSelectionChange = (val) => {
	multipleSelection.value = val;
	//   curTableRow.value = val[0];
};

const changeType = () =>{
	params.value.fortification = '';
	queryPagination.value.pageNo = 1
	onSearch();
}

//分页
const handleSizeChange = (val) => {
	// 改变每页显示的条数 
	queryPagination.value.pageSize = val
	// 注意：在改变每页显示的条数时，要将页码显示到第一页
	queryPagination.value.pageNo = 1
	onSearch();
};
const handleCurrentChange = (val) => {
	onSearch();
};

//建筑物区域特征信息维护表格查询
const onSearch = () => {
	const query = {
		...params.value,
		page: queryPagination.value.pageNo,
		rows: queryPagination.value.pageSize
	}

	getValEngineering(query).then((res) => {
		if (res.code === 200) {
			//console.log(res)
			queryPagination.value.total = res.data.total
			tableData.value = [];
			const rows = res.data.rows;
			//循环遍历之前加上非空判断
			if (rows.length >= 0) {
				rows.forEach((item) => {
					tableData.value.push({
						id: item.id,
						code: item.code,
						bridgeType:item.bridgeType,
						upType: item.type,
						year: item.year,
						fortification: item.fortification,
						businessObject: item.businessObject,
						calculationStatus: item.calculationStatus,
						userName: item.createUserName,
						createTime: item.createTime,
						versionCode: item.versionCode,
						destructiveState6: item.destructiveState6,
						destructiveState7: item.destructiveState7,
						destructiveState8: item.destructiveState8,
						destructiveState9: item.destructiveState9,
						destructiveState10: item.destructiveState10,
					});
				});
			}
		}
	}).catch(err => {
		console.log(err);
	}
	);
};
const viewProject = (row, edit) => {
	// 查询、编辑模式下参数处理
	const editParams = edit ? {} : { operateType: 'query' };
	toTypeView(row, editParams)
}

// 跳转
const showDialog = ref(false);
const radio = ref('');
const radioObj = ref({
	row: {},
	editParams: {},
	isComputed: false
})
const onClickConfirm = () => {
	const { row, editParams } = radioObj.value;
	if (radio.value == '1') {
		router.push({
			path: '/lifelineVulnerAnalysis/underPipeNet/simpleCorrModel',
			query: {
				id: row.id,
				type: row.businessObject,
				upType: radio.value,
				...editParams,
			}
		})
	}
	if (radio.value == '2') {
		router.push({
			path: '/lifelineVulnerAnalysis/underPipeNet/continWeldPipe',
			query: {
				id: row.id,
				type: row.businessObject,
				upType: radio.value,
				...editParams,
			}
		})
	}
	if (radio.value == '3') {
		router.push({
			path: '/lifelineVulnerAnalysis/underPipeNet/interfacePipe',
			query: {
				id: row.id,
				type: row.businessObject,
				upType: radio.value,
				...editParams,
			}
		})
	}
}
const toTypeView = (row, editParams) => {
	if (row.calculationStatus == '2' && editParams.operateType) {
		ElMessageBox.confirm('该条数据参数更改，需重新计算。', '消息',
			{
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
			.then(() => {
				proxy.$modal.loading("正在计算，请稍候...");
				reCovercalculate({id:row.id,type:row.upType,bridgeType:row.bridgeType}).then(res => {
					if (res.code==200) {
						proxy.$modal.closeLoading();
						proxy.$modal.msgSuccess(res.data)
						onSearch();
					}
				})
			})
			.catch(() => { })
	} else {
		if (row.businessObject == '地下管网') {
			radio.value = '';
			radioObj.value = {
				row: {},
				editParams: {}
			}
			showDialog.value = true;
			radioObj.value.row = row;
			radioObj.value.editParams = editParams;
		} else if (row.businessObject == '供水设施') {
			router.push({
				path: '/lifelineVulnerAnalysis/waterSupply',
				query: {
					id: row.id,
					type: row.businessObject,
					...editParams,
				}
			})
		} else if (row.businessObject == '燃气-储气罐') {
			router.push({
				path: '/lifelineVulnerAnalysis/gasSupply',
				query: {
					id: row.id,
					type: row.businessObject,
					...editParams,
				}
			})
		} else if (row.businessObject == '桥梁') {
			router.push({
				path: '/lifelineVulnerAnalysis/bridgeVulnerCalc',
				query: {
					id: row.id,
					type: row.businessObject,
					bridgeType:row.bridgeType,
					...editParams,
				}
			})
		} else if (row.businessObject == '道路') {
			router.push({
				path: '/lifelineVulnerAnalysis/roadVulnerCalc',
				query: {
					id: row.id,
					type: row.businessObject,
					...editParams,
				}
			})
		} else if (row.businessObject == '变电站') {
			router.push({
				path: '/lifelineVulnerAnalysis/subVulner',
				query: {
					id: row.id,
					type: row.businessObject,
					...editParams,
				}
			})
		} else if (row.businessObject == '供电设备') {
			router.push({
				path: '/lifelineVulnerAnalysis/powerSupplyVulner',
				query: {
					id: row.id,
					type: row.businessObject,
					...editParams,
				}

			})
		} else if (row.businessObject == '通信设备') {
			router.push({
				path: '/lifelineVulnerAnalysis/comEquiVulner',
				query: {
					id: row.id,
					type: row.businessObject,
					...editParams,
				}
			})
		} else if (!row.businessObject) {
			ElMessage({
				type: 'warning',
				message: '当前行所属业务对象不明确!'
			});
		}
	}

}

// 删除行
const onDelete = () => {
	const ids = [];
	const upTypes = [];
	if (!multipleSelection.value || multipleSelection.value.length <= 0) {
		ElMessage({
			type: 'warning',
			message: '请选中数据!'
		});
		return false;
	} else {
		proxy.$modal.confirm('请确认是否删除？').then(() => {
			const queryArr = [];
			multipleSelection.value.forEach(item => {
				queryArr.push({id:item.id,type:item.upType,bridgeType:item.bridgeType})
			})
			deleteValEngineering(queryArr).then((res) => {
				if (res.code === 200) {
					ElMessage({
						type: 'success',
						message: '删除成功!'
					});
					onSearch();
				}
			}).catch(err => {
				ElMessage({
					type: 'error',
					message: err.message || '删除失败!'
				});
			})
		});
	}
}

//重置
const onRest = () => {
	proxy.resetForm("queryRef")
	onSearch();
};
//字典表查询
const optionList1 = ref([])
const optionList2 = ref([])
const optionList3 = ref([])
/** 获取字典值 */
async function getDictData() {
	await getValidDictItemsByDictCode("smxjsnd").then(response => {
		optionList1.value = response.data;//建造年代
	});
	await getValidDictItemsByDictCode("smxsfqk").then(response => {
		optionList2.value = response.data;//设防情况
	});
	await getValidDictItemsByDictCode("smxdlsfqk").then(response => {
		optionList3.value = response.data;//设防情况
	});
}
getDictData();
// 挂载
onMounted(() => {
	let type = route.query.type;
	if (type) {
		params.value.type = type;
	}
	onSearch();
});
</script>

<style lang="scss">
.paging {
	padding: 20px 0;
}

.form-inline {
	.el-form-item {
		margin-right: 0px;
	}
}</style>
